class DropDownList extends eui.Component {
	private imgBtn: eui.Image;

	private lbName: eui.Label;

	private imgSort: eui.Image;

	private imgShow: eui.Image;

	dataList: eui.List;

	scroller: eui.Scroller;

	private spMask: egret.Shape;

	private isShow = false;

	private posScrollerClose: number;

	isShowSort = true;

	static ITEM_TAP = 'ITEM_TAP';

	static SORT_TAP = 'TOUCH_TAP';

	reversed = false;

	constructor() {
		super();
	}

	protected override createChildren() {
		super.createChildren();
		console.log(this.scroller);
		const spMask = new egret.Shape();
		spMask.graphics.beginFill(0x000000);
		spMask.graphics.drawRect(
			0,
			0,
			this.scroller.width,
			this.scroller.height,
		);
		spMask.graphics.endFill();

		this.addChild(spMask);
		this.scroller.mask = spMask;

		this.spMask = spMask;

		this.spMask.y = this.imgBtn.height;

		this.posScrollerClose = this.scroller.y = -this.scroller.height;

		this.imgBtn.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onChangeList,
			this,
		);

		this.lbName.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onChangeList,
			this,
		);

		this.imgShow.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onChangeList,
			this,
		);

		this.dataList.addEventListener(
			eui.ItemTapEvent.ITEM_TAP,
			this.onClickList,
			this,
		);

		this.imgSort.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onClickSort,
			this,
		);
	}

	private onClickSort(): void {
		this.reversed = !this.reversed;
		this.imgSort.rotation = this.reversed ? 180 : 0;
		this.dispatchEventWith(DropDownList.SORT_TAP, false, {
			reverse: this.reversed,
		});
	}

	private onClickList(e: eui.ItemTapEvent): void {
		const { name } = e.item;
		const index = e.itemIndex;
		this.lbName.text = name;

		this.onChangeList();
		this.dispatchEventWith(DropDownList.ITEM_TAP, false, {
			index,
			name,
		});
	}

	private onChangeList(): void {
		if (!this.isShow) {
			egret.Tween.get(this.scroller)
				.to({ y: this.imgBtn.height }, 300)
				.call(() => {
					this.scroller.mask = null;
					this.spMask.visible = false;
				});
			this.imgShow.rotation = 180;
		} else {
			this.scroller.mask = this.spMask;
			this.spMask.visible = false;
			egret.Tween.get(this.scroller).to(
				{ y: this.posScrollerClose },
				300,
			);
			this.imgShow.rotation = 0;
		}
		this.isShow = !this.isShow;
	}

	setSelectedIndex(index: number): void {
		this.dataList.selectedIndex = index;
		const item = this.dataList.selectedItem;
		this.lbName.text = item.name;
	}

	hideShow(): void {
		this.isShow = false;
	}
}
class DropUpList extends eui.Component {
	private imgBtn: eui.Image;

	private lbName: eui.Label;

	private imgSort: eui.Image;

	private imgShow: eui.Image;

	dataList: eui.List;

	scroller: eui.Scroller;

	private spMask: egret.Shape;

	private isShow = false;

	private posScrollerClose: number;

	isShowSort = true;

	static ITEM_TAP = 'ITEM_TAP';

	static SORT_TAP = 'TOUCH_TAP';

	reversed = false;

	constructor() {
		super();
	}

	protected override createChildren() {
		super.createChildren();
		console.log(this.scroller);
		const spMask = new egret.Shape();
		spMask.graphics.beginFill(0x000000);
		spMask.graphics.drawRect(
			0,
			0,
			this.scroller.width,
			this.scroller.height,
		);
		spMask.graphics.endFill();

		this.addChild(spMask);
		this.scroller.mask = spMask;

		this.spMask = spMask;

		this.spMask.y = this.imgBtn.height;

		this.posScrollerClose = this.scroller.y = -this.scroller.height;

		this.imgBtn.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onChangeList,
			this,
		);

		this.lbName.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onChangeList,
			this,
		);

		this.imgShow.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onChangeList,
			this,
		);

		this.dataList.addEventListener(
			eui.ItemTapEvent.ITEM_TAP,
			this.onClickList,
			this,
		);

		this.imgSort.addEventListener(
			egret.TouchEvent.TOUCH_TAP,
			this.onClickSort,
			this,
		);
	}

	private onClickSort(): void {
		this.reversed = !this.reversed;
		this.imgSort.rotation = this.reversed ? 180 : 0;
		this.dispatchEventWith(DropDownList.SORT_TAP, false, {
			reverse: this.reversed,
		});
	}

	private onClickList(e: eui.ItemTapEvent): void {
		const { name } = e.item;
		const index = e.itemIndex;
		this.lbName.text = name;

		this.onChangeList();
		this.dispatchEventWith(DropDownList.ITEM_TAP, false, {
			index,
			name,
		});
	}

	private onChangeList(): void {
		if (!this.isShow) {
			egret.Tween.get(this.scroller)
				.to({ y: 0 }, 300)
				.call(() => {
					this.scroller.mask = null;
					this.spMask.visible = false;
				});
			this.imgShow.rotation = 180;
		} else {
			this.scroller.mask = this.spMask;
			this.spMask.visible = false;
			egret.Tween.get(this.scroller).to(
				{ y: -this.posScrollerClose },
				300,
			);
			this.imgShow.rotation = 0;
		}
		this.isShow = !this.isShow;
	}

	setSelectedIndex(index: number): void {
		this.dataList.selectedIndex = index;
		const item = this.dataList.selectedItem;
		this.lbName.text = item.name;
	}

	hideShow(): void {
		this.isShow = false;
	}
}
